<template>
  <!-- 二柱状图 -->
  <div ref="echarts"
       id="mains">
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data () {
    return {

    }
  },
  props: {
    option: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    option: {
      handler (newval, oldval) {
        console.log(newval, oldval);
        this.option = newval
        this.init()
      },
      deep: true,
    },
  },
  methods: {
    init () {
      // var chartDom = document.getElementById('mains');
      // var myChart = echarts.init(chartDom);
      // var option;
      const { xAxis, yAxis, one, tow } = this.option
      console.log("this.option", this.option);
      var myChart = echarts.init(this.$refs.echarts);

      myChart.setOption({

        legend: {
          top: '20',
          // textStyle: {
          //   color: 'rgba(172, 254, 255, 1)'
          // },
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(24,48,72,0.6)',
          borderWidth: 0,
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: 'white' // 设置文字颜色
          }
        },
        xAxis: [
          {
            type: 'category',
            data: xAxis.data,
            axisPointer: {
              type: 'shadow'
            },
            // name: '单位:亿元',
            axisLine: {
              show: false,
              lineStyle: {
                // color: 'rgba(0, 251, 255, 1)'
              }
            }
          },
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: yAxis.max,
            interval: yAxis.interval,
            name: yAxis.name,
            axisLine: {
              show: false,
              lineStyle: {
                // color: 'rgba(0, 251, 255, 1)'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                // color: 'rgba(0, 251, 255, .1)'
                // opacity: 0.2
              }
            }
          },
          {
            type: 'value',
            min: 0,
            max: yAxis.max,
            interval: yAxis.interval,
            name: '单位:亿元',
            axisLine: {
              show: false,
              lineStyle: {
                // color: 'rgba(0, 251, 255, 1)'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                // color: 'rgba(0, 251, 255, .1)'
                // opacity: 0.2
              }
            }
          },
        ],

        series: [
          {
            name: one.name,
            data: one.data,
            type: 'bar',
            smooth: true,
            barWidth: 8,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: one.color // 柱状图颜色
                  }
                ]),
                barBorderRadius: [2, 2, 0, 0] //圆角大小
              }
            }
          },
          {
            name: tow.name,
            data: tow.data,
            type: 'bar',
            smooth: true,
            barWidth: 8,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: tow.color // 柱状图颜色
                  }
                ]),
                barBorderRadius: [2, 2, 0, 0] //圆角大小
              }
            }
          },
        ]
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      // option && myChart.setOption(option);
    }
  },
  created () {

  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
#mains {
  width: 100%;
  height: 100%;
}
</style>
